<script setup lang="ts">
import {RouterView} from 'vue-router'
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="60px">
        <el-menu default-active="/app1"
                 class="el-menu-vertical-demo"
                 background-color="#646464"
                 style="height: 100%;width: 100%;border-right: none"
                 router
        >
          <el-menu-item index="/app1" style="height: 60px;display: flex;justify-content: center;align-items: center;--el-menu-active-color: #f3ca4c;--el-menu-text-color: #fff">
            <span style="font-size: 20px">1</span>
          </el-menu-item>
          <el-menu-item index="/app2" style="height: 60px;display: flex;justify-content: center;align-items: center;--el-menu-active-color: #f3ca4c;--el-menu-text-color: #fff">
            <span style="font-size: 20px">2</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="40px">
        <span style="display: flex;align-items: center;margin-right: 4px;font-size: 20px;font-weight: bold">
            赌狗计算器
        </span>
        </el-header>
        <el-main>
          <RouterView></RouterView>
        </el-main>
        <el-footer height="40px" style="background: #cdcdcd">
          <div class="logo">
          <span style="display: flex;align-items: center;margin-right: 4px;font-size: 16px;font-weight: bold">
            WolfNeo
          </span>
            <img src="/ico.ico" alt="logo"/>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>


</template>

<style scoped>

.logo {
  display: flex;
  position: absolute;
  height: 32px;
  margin-top: 4px;
  right: 4px;
}

.common-layout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.el-main {
  //background: #efefef;
  padding: 0;
  text-align: center;

}

.el-header {
  display: flex;
  background-color: #dbdbdb;
  //color: #FFFFFF;
  justify-content: center;
  align-items: center;
}

.el-container {
  height: 100%;
}
</style>
